<!-- 问题管理——全部问题 -->
<template>
  <page-panel-new class="app-container" header-title="问题展示">
    <el-row type="flex" justify="end">
      <el-col :span="1.5">
        <el-button
          type="text"
          @click="goWorkOrder"
        >
          更多问题 >
        </el-button>
      </el-col>
    </el-row>
    <el-table
      ref="table"
      :data="dataSource"
      height="calc(100% - 34px)"
      :row-style="{ height: '0px' }"
      :header-cell-style="{ 'text-align': 'center', padding: '0px 0' }"
      header-cell-class-name="table_header"
      :cell-style="{ padding: '2px' }"
      style="width: 100%; height: 100%;"
      @cell-mouse-enter="autoScroll(false)"
      @cell-mouse-leave="autoScroll"
    >
      <el-table-column
        label="标题"
        prop="orderTitle"
        :show-overflow-tooltip="true"
        :min-width="220"
        align="left"
      >
        <template slot-scope="scope">
          <span>{{ `标题: ${scope.row.orderTitle}\n发起时间: ${scope.row.initiatorTime}` }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        prop="status"
        :show-overflow-tooltip="true"
        :min-width="80"
        align="center"
      >
        <template slot-scope="scope">
          <dict-tag :style="{ color: statusColor[scope.row.status]}" :options="dict.type.sys_work_order_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        label="发起人"
        prop="initiatorName"
        :show-overflow-tooltip="true"
        :min-width="80"
        align="center"
      />
    </el-table>
  </page-panel-new>
</template>

<script>
import checkInternet from "@/utils/checkInternet.js";
import { portalList } from "@/api/workOrder/allWorkOrders.js";
import { ListMixins } from "@/components/mixins/ListMixin";
import { addTokenToUrl } from "@/utils/jumpSupApp.js";

export default {
  name: "ShowWorkOrder",
  dicts: ["sys_work_order_status"],
  mixins: [ListMixins],
  data() {
    return {
      fn: {
        list: portalList
      },
      interval: null,
      statusColor: {
        AUDIT: "#e6a23c",
        REFUSE: "red",
        PROCESS: "#6969ff",
        COMPLETE: "green"
      }
    };
  },
  mounted() {
    this.autoScroll();
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    autoScroll(stop) {
      clearInterval(this.interval);
      if (typeof stop === "boolean") {
        return;
      }
      this.interval = this.slideMode();
    },
    slideMode() {
      const table = this.$refs.table;
      const divData = table.bodyWrapper;
      const distance = Math.max(parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01, 1);
      return setInterval(() => {
        divData.scrollTop += distance;
        // 在数据尚未全部加载完毕且网络正常时，以下两种情况允许继续加载数据
        // 1.没有出现滚动条
        // 2.有滚动条且滚动条已经滑动至底部
        if ((divData.scrollHeight <= divData.clientHeight) ||
          (divData.scrollHeight <= divData.scrollTop + divData.clientHeight)) {
          // 通过this.loading防止连续加载
          if (this.ipagination.total > this.dataSource.length && !this.loading && checkInternet()) {
            this.ipagination.current += 1;
            this.loadData();
            this.autoScroll();
          } else {
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    goWorkOrder() {
      const baseAddress = `${window.location.origin}${this.$router.mode === "hash" ? "/#/" : "/"}workOrder/AllWorkOrders`;
      window.open(addTokenToUrl(baseAddress), "_blank");
    },
    loadData(args) {
      if (!this.fn.list) {
        this.$message.warning("请设置fn.list函数!");
        return;
      }
      this.loading = true;
      if (args === 1) {
        this.ipagination.current = 1;
      }
      this.fn.list(this.getQueryParams()).then(res => {
        if (res && res.status === 200) {
          this.ipagination.total = res.data.total;
          if (args === 1) {
            this.dataSource = res.data.rows;
          } else {
            this.dataSource.push(...res.data.rows);
          }
        }
      })
        .catch(() => {
          this.ipagination.current -= 1;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  height: 100% !important;
  border: none !important;
  margin: 0 !important;
}

/deep/ .el-table {
  .cell {
    height: auto !important;
    line-height: 25px !important;

    span {
      white-space: break-spaces;
    }
  }
}
</style>